<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
    <link rel="stylesheet" href="../lib/animate.css">
    <style>
        .box{
            width:170px;
            height:170px;
            background: darkcyan;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2>{{title}}</h2>
        <myhead></myhead>
        <parent></parent>
    </div>
    <template id="parent">
        <div>
            <h2>parent = 父组件 - 1</h2>
            <h2>count === {{count}}</h2>
            <h2>msg === {{msg}}</h2>
            <p>
                <input type="text" v-model="msg">
            </p>
            <div class="box" v-if="show">我是被子组件修改的</div>
            <hr>
            <childone
                @eventasdfaesfih="getNewCount"
                @changepmsg="changeMymsg"
                :show="show"
                @changesomeshow="changeshow"
                
            ></childone>
            <hr>
            <childtwo 
            :msg="msg" 
            :set-new-count="setNewCount"
            :set-new-show = "setNewShow"
            :set-new-msg="setNewMsg"
            
            ></childtwo>
        </div>
    </template>
    <template id="childone">
        <div>
            <h2>childone = 子组件 - 1</h2>
            <button @click="changepcount">自定义事件 - 修改父组件的count</button>
            <p>
                <input type="text" @input="changepmsg">
            </p>
            <button @click="changepshow" >自定义事件去修改父组件的 show </button>
            <button @click="changeCountByParent" >$parent 去修改父组件的 count  </button>

        </div>
    </template>
    <template id="childtwo">
        <div>
            <h2>childtwo = 子组件 - 2</h2>
            <h2>msg --- {{msg}}</h2>
            <button @click="setNewCount(88)">点击修改count  反向 props</button>
            <button @click="setNewShow">点击修改show  反向 props</button>
            <button @click="setNewMsg('周末好好总结一下Vue')">点击修改msg   反向 props</button>
        </div>
    </template>
 
    <script>
        Vue.component("myhead",{
            template:"<h2>wh2114 - 天天大声背面试题目 </h2>"
        })

        Vue.component("parent",{
            template:"#parent",
            methods:{
                todoDone(){
                    console.log("todoDone 任务完成")
                },
                setNewCount(count){
                    this.count+=count;
                },
                setNewShow(){
                    this.show = !this.show 
                },
                setNewMsg(msg){
                    this.msg = msg 
                },
                getNewCount(n){
                    this.count+=n
                },
                changeMymsg(msg){
                    this.msg = msg 
                },
                changeshow(){
                    this.show = !this.show 
                }
            },
            data(){
                return {
                    count:2022,
                    msg:"Are you OK?",
                    show:true 
                }
            }
        })
        Vue.component("childone",{
            template:"#childone",
            methods:{
                changepcount(){
                    // 子组件发送事件
                    this.$emit("eventasdfaesfih",50)
                },
                changepmsg(e){
                    this.$emit('changepmsg',e.target.value)
                },
                changepshow(){
                    this.$emit("changesomeshow")
                },
                changeCountByParent(){
                    // this.$parent.$parent 
                    this.$parent.count++;
                    this.$parent.show = !this.$parent.show 
                    this.$parent.msg = "2114 - 周末写vue"
                    this.$parent.todoDone()
                }
            }
        })
        Vue.component("childtwo",{
            template:"#childtwo",
            props:['msg','setNewCount','setNewShow','setNewMsg']
        })
   
        
        const vm = new Vue({
            data:{
                title:"Vue component 组件通讯(父子 兄弟) - 子改父",
            },
            components:{
                first:{
                    template:"<h2>First - vue 组件初始化 </h2>"
                }
            },
            mounted(){
                document.getElementsByTagName("title")[0].innerHTML = this.title 
               
            }
        }).$mount("#app")


    </script>
    <!-- 
        组件  小巧  独立  可复用  
        组件系统 
        组件组织关系  
        1. 父子组件关系
        <A> 
            <B></B>
            <C></C>
        </A>
        2. 兄弟组件关系  
        <B></B>
        <C></C>

        Emit  发送
        On    监听 
        Once  只触发一次  


        组件之间的通信  
        1. 父组件访问子组件      （父组件修改子组件）


        2. 子组件访问父组件
        a.  自定义事件   emit  子组件发送事件    on 父组件监听事件 修改内部变量   
        b.  $parent     父实例，如果当前实例有的话  父组件  
        c.  反向props   父组件 把修改自身变量的方法函数通过props 传递给子组件 子组件执行这个props函数  实现子改父 
        d.  事件中央总线   
        e.  vuex   
        
        3.  兄弟组件之间的通信  


        refs   this.$refs  
        1. 绑定到标签  指的当前的真实DOM 
        2. 绑定到组件  指的是当前的组件对象  直接修改组件内的变量  直接调用组件内部的函数 
     -->
</body>
</html>